@charset "UTF-8";

body{background-color: #f3baff; margin: 0px;}
.back{position: absolute;top:0;
z-index: 1;}

.a1 {position: absolute;top:0;
     z-index: 10;}
.a2{position:absolute;
top: 0px;
z-index: 20;
animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;}
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

.a3{position:absolute;
top:0px;
z-index: 10;
animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.a4{position: absolute;
top: 120px;
z-index: 20;}


.b1{position: fixed;
	top:-380px;
    z-index: 200;}
.h{position: fixed;top:-50px;left:-10px;
    z-index: 200;}

.c1{position: absolute;top:800px;z-index: 2;}
.c2{position: absolute;top:1310px;z-index: 2;}
.c3{position: absolute;top:1820px;left: 0px;z-index: 2;}
.c4{position: absolute;top:1820px;left: 0px;z-index: 20;}
.c5{position: absolute;top:800px;left: 0px;z-index: 2;
animation-name:updown1;  
    animation-delay:0s;  
    animation-duration: 3s;   
    animation-timing-function: ease-in-out;  
    animation-iteration-count: infinite; }
@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.c6{position: absolute;top:1310px;left: 0;z-index: 2;
animation-name:updown1;  
    animation-delay:0s;  
    animation-duration: 3s;  
    animation-timing-function: ease-in-out;  
    animation-iteration-count: infinite; }
@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.c7{position: absolute;top:1820px;left: 0px;
animation-name:updown1;  
    animation-delay:0s;   
    animation-duration: 3s;   
    animation-timing-function: ease-in-out;  
    animation-iteration-count: infinite;
z-index: 10;}
@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.c8{position: absolute;top:800px;left: 0px;z-index: 2;}
.c9{position: absolute;top:1310px;left: 0px;z-index: 2;}
.c10{position: absolute;top:1820px;left: 0px;z-index: 2;}

.c:hover{opacity:0.5;
	cursor: pointer;}
 .c:active{
	position: relative;
	top: 3px;
 
}